import { globalStyle, style } from '@vanilla-extract/css';
import { MEDIA_MAX_WIDTH, vars, Z_INDEX } from '../../theme/vars.css';

export const dialogStyle = style({
	position: 'fixed',
	display: 'flex',
	flexDirection: 'column',
	alignItems: 'center',
	justifyContent: 'flex-start',
	left: '0',
	right: '0',
	top: '0',
	bottom: '0',
	WebkitUserSelect: 'none',
	userSelect: 'none',
	backgroundColor: 'transparent',
	overflow: 'scroll',
	overscrollBehavior: 'contain',
	// scrollbarWidth: 'none',
	transition: 'opacity 0.2s',
	opacity: 0,
	padding: '2rem',
	zIndex: Z_INDEX.DIALOG,
	touchAction: 'none',
	selectors: {
		'&::-webkit-scrollbar': {
			width: 0,
			height: 0,
		},
	},
	'@media': {
		[MEDIA_MAX_WIDTH]: {
			padding: '1rem',
		},
	},
});

globalStyle(`${dialogStyle} > div.container`, {
	display: 'flex',
	flexDirection: 'column',
	alignItems: 'center',
	flexGrow: '1',
	flexShrink: '0',
	justifyContent: 'center',
});

export const dialogPanel = style({
	outline: 'none',
	position: 'relative',
	overflow: 'hidden',
	backgroundColor: vars.color.panelBackground,
	boxShadow: `1px 1px 10px ${vars.color.shadow}`,
	display: 'flex',
	flexDirection: 'column',
	alignItems: 'stretch',
	padding: '2rem',
	borderRadius: vars.layout.middleRadius,
	flexShrink: '0',
	transition: 'transform 0.2s',
	transform: 'scale(0.5)',
	touchAction: 'none',
});

globalStyle(`${dialogPanel}>h2`, {
	fontWeight: 'normal',
	marginTop: 0,
	marginBottom: '1rem',
	fontSize: '1.2rem',
	color: vars.color.emphasizeText,
});

globalStyle(`${dialogPanel}>h2:empty`, {
	display: 'none',
});

globalStyle(`${dialogPanel}>div.content`, {
	lineBreak: 'anywhere',
	fontWeight: 'normal',
	fontSize: '1rem',
	// marginBottom: '1rem',
	color: vars.color.text,
	maxWidth: '80vw',
	minWidth: '200px',
	textAlign: 'center',
});

globalStyle(`${dialogPanel}>div.bar`, {
	display: 'flex',
	flexDirection: 'row',
	justifyContent: 'center',
	marginTop: '2rem',
});

globalStyle(`${dialogPanel}>div.bar:empty`, {
	display: 'none',
});

globalStyle(`${dialogPanel}>div.bar button`, {
	borderRadius: 0,
	flex: '1',
});

globalStyle(`${dialogPanel}>div.bar button:not(:last-child)`, {
	borderRight: 'none',
});

globalStyle(`${dialogPanel}>div.bar button:first-child`, {
	borderTopLeftRadius: vars.layout.smallRadius,
	borderBottomLeftRadius: vars.layout.smallRadius,
});

globalStyle(`${dialogPanel}>div.bar button:last-child`, {
	borderTopRightRadius: vars.layout.smallRadius,
	borderBottomRightRadius: vars.layout.smallRadius,
});

globalStyle(`${dialogStyle}.active`, {
	opacity: 1,
});

globalStyle(`${dialogStyle}.active ${dialogPanel}`, {
	transform: 'scale(1)',
});

globalStyle(`${dialogStyle}.pre-covered ${dialogPanel}:after`, {
	content: ' ',
	display: 'block',
	position: 'absolute',
	transition: 'opacity 0.2s',
	backgroundColor: vars.color.mask,
	borderRadius: vars.layout.middleRadius,
	opacity: 0,
	left: 0,
	top: 0,
	right: 0,
	bottom: 0,
});

globalStyle(`${dialogStyle}.pre-covered.covered ${dialogPanel}:after`, {
	opacity: 1,
});

export const alertBox = style({
	display: 'flex',
	flexDirection: 'row',
	alignItems: 'center',
	justifyContent: 'center',
});

export const dangerIcon = style({
	width: '3rem',
	height: '3rem',
	marginRight: '1rem',
});
